html {
    background: #fff;
    transition: color 300ms, background-color 300ms;
    &.dark {
        filter: contrast(90%) invert(100%);
        img {
            filter: hue-rotate(180deg) contrast(90%);
        }
    }
}

// 表格样式优化
.ve_header_row_class_name,
.el-table__fixed-right-patch {
    background: $main-bg-color !important;
}

.ve_header_cell_class_name {
    background: $main-bg-color !important;
}

.ve_cell_class_name {
    background: $base-color !important;
    border-color: $base-color !important;
}

.ve_row_class_name {
    background: $base-color !important;
}

// 间距类
.ve_p_10 {
    padding: 10px;
}

.ve_p_20 {
    padding: 20px;
}

// 滚动条样式
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.5);
    border-radius: 3px;
    
    &:hover {
        background-color: rgba(144, 147, 153, 0.7);
    }
}

// 下拉选项样式
.ve_select_option_slot {
    font-size: 12px;
    float: left;
    line-height: initial;
    padding-bottom: 10px;
    opacity: 0.7;
}

.ve_option_box {
    width: calc(50% - 132px);
}

.size-watch {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

.ve_flex_col {
    display: flex;
    flex-direction: column;
    height: calc(100vh - #{$nav-height} - #{$nav_menu_height} - 30px);
}

.el-select {
    width: 120px;
}

.el-form-item__label {
    text-align: left !important;
    width: auto !important;
}

// 卡片样式优化
.el-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .el-card__header {
        font-weight: 500;
        background-color: #f5f7fa;
    }
}

// 按钮样式优化
.el-button {
    border-radius: 4px;
    
    &.el-button--primary {
        background-color: $base-color;
        border-color: $base-color;
    }
}

// 输入框样式优化
.el-input__inner {
    border-radius: 4px;
}

// 响应式断点
//@media (max-width: $mobile_breakpoint) {
//    .ve_flex_col {
//        height: calc(100vh - #{$nav-height} - 20px);
//    }
//
//    .el-select {
//        width: 100%;
//    }
//}

// Custom pagination styles
.el-pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
}

.pagination-bottom {
    margin-top: auto;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
}
